import { useReducer } from 'react'

const counterReducer = (state, action) => {
  console.log(state)
  console.log(action)
  switch (action.type) {
    case 'INCREASE':
      return { ...state, count: state.count + 1 }
    case 'DECREASE':
      return { ...state, count: state.count - 1 }
    default:
      throw new Error()
  }
}
const Counter = () => {
  const [state, dispatch] = useReducer(counterReducer, { count: 0,msg:12 })

  const increase = () => {
    dispatch({ type: 'INCREASE' })
  }
  const decrease = () => {
    dispatch({ type: 'DECREASE' })
  }
  /* 可以看出，使用useReducer代码更加复杂，对于这种场景来说，useState更加合适。
  当你管理基本类型的时候使用useState
  当你处理复杂类型(对象或者数组)的时候使用useReducer */
  return (
    <div>
      <h2>Counter whit useState</h2>
      <p>Count: {state.count}</p>
      <div>
        <button type="button" onClick={increase}>
          +
        </button>
        <button type="button" onClick={decrease}>
          -
        </button>
      </div>
    </div>
  )
}

export default Counter
